<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调试页面</title>
    <link rel="stylesheet" type="text/css" href="./css/debug.css">
</head>
<script src="./js/jquery/jquery.min.js"></script>
<body>
<div id="container-box" class="container-box">
    <div class="title">
        调试页面
    </div>
    <form style="width: 55%; float:left;" id="form">
        <div class="form-group">
            <label for="url">url :</label>
            <input class="form-control" type="text" id="url"/>
        </div>
        <div class="form-group">
            <label for="timeout">timeout :</label>
            <input class="form-control" type="number" id="timeout"/>
        </div>
        <div class="form-group">
            <label for="wait-for">wait-for :</label>
            <input class="form-control" type="text" id="wait-for"/>
        </div>
        <div class="form-group">
            <label for="wait-until">wait-until :</label>
            <input class="form-control" type="text" id="wait-until"/>
        </div>
        <div class="viewport">
            <div class="form-group split">
                <label for="viewport">viewport : </label>
                <input type="checkbox" id="viewport" onchange="changeChecked(this)">
            </div>
            <ul style="padding-left: 100px" class="margin-list">
                <li class="form-group">
                    <label for="width1">- width :</label>
                    <input type="text" id="width1" class="form-control" style="width: 80px">
                </li>
                <li class="form-group">
                    <label for="height1">- height :</label>
                    <input type="text" id="height1" class="form-control" style="width: 80px">
                </li>
                <li class="form-group">
                    <label for="device-scale-factor">- deviceScaleFactor:</label>
                    <input type="text" id="device-scale-factor" class="form-control" style="width: 80px">
                </li>
            </ul>
            <div style="clear: both"></div>
        </div>
        <div class="img-option">
            <div class="form-group split">
                <label for="img-option">imgOption:</label>
                <input type="checkbox" id="img-option" onchange="changeChecked(this)"/>
            </div>
            <ul style="padding-left: 50px" class="img-optionList">
                <li class="form-group">
                    <label for="type">type :</label>
                    <select name="type" id="type" class="form-control">
                        <option selected>png</option>
                        <option>jpeg</option>
                    </select>
                </li>
                <li class="form-group">
                    <label for="quality">quality :</label>
                    <input type="text" class="form-control" id="quality">
                </li>
                <li class="form-group">
                    <label for="full-page">full-page :</label>
                    <input type="checkbox" id="full-page">
                </li>
                <li class="form-group">
                    <label for="screenshot-selector">screenshot-selector :</label>
                    <input type="text" class="form-control" id="screenshot-selector">
                </li>

                <li>
                    <div class="form-group split">
                        <label for="clip" style="width: 70px">+ clip : </label>
                        <input type="checkbox" id="clip" onchange="changeChecked(this)">
                    </div>
                    <ul style="padding-left: 40px" class="clip-list">
                        <li class="form-group">
                            <label for="x">- x :</label>
                            <input type="text" id="x" class="form-control" style="width: 80px">
                        </li>
                        <li class="form-group">
                            <label for="y">- y :</label>
                            <input type="text" id="y" class="form-control" style="width: 80px">
                        </li>
                        <li class="form-group">
                            <label for="width">- width :</label>
                            <input type="text" id="width" class="form-control" style="width: 80px">
                        </li>
                        <li class="form-group">
                            <label for="height">- height :</label>
                            <input type="text" id="height" class="form-control" style="width: 80px">
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </form>
    <div class="data-show">
        <pre></pre>
    </div>

    <div style="clear:both;"></div>
    <div style="text-align: center;margin-top: 30px">
        <button type="button" onclick="send()">生成图片</button>
    </div>
</div>

<iframe src="about:blank" frameborder="0" style="width: 100%;height: 500px;"></iframe>
<script>
    let params = {}

    $("#container-box").on("input", changeParams);

    function changeChecked(that) {
        if ($(that).prop('checked')) {
            $(that).parent().siblings('ul').stop().show()
        } else {
            $(that).parent().siblings('ul').stop().hide()
        }
        $('pre').height($('#form').height() - 50)
    }

    changeParams();

    function changeParams() {
        const timeout = $('#timeout').val()
        params = {
            url: $('#url').val() || void 0,
            timeout: timeout ? +timeout : void 0,
            waitFor: $('#wait-for').val() || void 0,
            waitUntil: $('#wait-until').val() || void 0,
        };
        const imgOptionChecked = $('#img-option').prop('checked')
        const clipChecked = $('#clip').prop('checked')
        const viewport = $('#viewport').prop('checked')
        if (imgOptionChecked) {
            let imgOptionParams = {
                "type": $('#type').val() || void 0,
                "quality": +$('#quality').val() || void 0,
                "full-page": $('#full-page').prop('checked') || void 0,
                "screenshot-selector": $('#screenshot-selector').val() || void 0,
            }
            if (clipChecked) {
                const clip = {}
                $(".clip-list .form-group").each((index, item) => {
                    const key = $(item).find("input").attr('id')
                    const value = $(item).find('input').val()
                    clip[key] = +value || void 0
                })
                imgOptionParams.clip = clip
            }
            params.imgOption = imgOptionParams;
        }
        if (viewport) {
            params.viewport = {
                'width': +$('#width1').val() || void 0,
                'height': +$('#height1').val() || void 0,
                'deviceScaleFactor': +$('#device-scale-factor').val() || void 0,
            };
        }
        setParamsView(params)
    }

    getCacheParams()

    function getCacheParams() {
        params = JSON.parse(sessionStorage.getItem('data')) || {};
        setParamsView(params)
        Object.keys(params).forEach(key => {
            backFill(params, key)
        });

        const src = sessionStorage.getItem('src');
        if (src) {
            $('iframe').attr('src', src);
        }
    }

    function backFill(data, prop, parent) {
        let fix = '';
        if (parent === 'viewport' && (prop === 'width' || prop === 'height')) {
            fix = '1';
        }
        const selector = humpToLine(prop + fix);
        const el = $(selector);
        const value = data[prop];
        const type = typeof value;
        if (type === "boolean") {
            el.prop('checked', true)
            changeChecked(selector)
        } else if (type === 'string' || type === 'number') {
            el.val(value);
        } else if (value && type === 'object') {
            el.prop('checked', true);
            changeChecked(selector)
            Object.keys(value).forEach(subKey => {
                backFill(value, subKey, prop)
            })
        }
    }

    async function send() {
        sessionStorage.setItem('data', JSON.stringify(params))
        const response = await fetch('/pdf-service/generateIMG', {
            method: 'post',
            credentials: 'same-origin',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                pages: [params]
            })
        })
        const result = await response.json();
        if (+result.code !== 0) {
            alert(result.msg)
        } else {
            const src = result.data[0];
            $('iframe').attr("src", src);
            sessionStorage.setItem('src', src);
        }
    }

    function humpToLine(name) {
        return '#' + name.replace(/([A-Z])/g, "-$1").toLowerCase();
    }

    function setParamsView(value) {
        $('pre').text(JSON.stringify(value, null, 2))
    }
</script>
</body>
</html>
